<template>
	<view class="demo">
		<!-- <image :src="ewmImg.path" id="ercode" ref="ercode" class="ercode" mode=""></image> -->
		<canvas :style="{ width: canvasW + 'px', height: canvasH + 'px' }" canvas-id="myCanvas" id="myCanvas"></canvas>
	</view>
</template>
<script>
	export default {
		components: {},
		props: {
			// painting painting
			canvaData: {
			  type: Object,
			  default: function() {
				return {}
			  }
			},
		},
		data() {
			return {
				canvasW: 375, // 画布宽
				canvasH: 667, // 画布高
				bgImg: {}, // 商品主图
				disImg:{}, // 内容图片
				ewmImg:{}, // 二维码图片
				// painting canvaData
				painting: {
				    width: '375px',
				    height: '667px',
				    background: '#fff',
				    views: [
				      // 背景
				      {
				          type: 'image',
				          url: '',
				          css: {
				              width: '375px',
				              height: '667px',
				          },
				      },
				      // 标题
				      {
				        type: 'text',
				        text: '',
				        css: {
				          left: '25px',
				          top: '122px',
				          width: '650px',
				          fontSize: '34px',
				          lineHeight: '42px'
				        }
				      },
				      // 时间
				      {
				        type: 'text',
				        text: '',
				        css: {
				          left: '25px',
				          top: '170px',
				          width: '650px',
				          fontSize: '24px',
				          color: '#9C9C9C'
				        }
				      },
				      // 图片
				      {
				          type: 'image',
				          url:'',
				          css: {
				            left: '25px',
				            top: '198px',
				            width: '325px',
				            height: '173px',
				          },
				      },
				      // 内容1
				      {
				        type: 'text',
				        text: '',
				        css: {
				          left: '25px',
				          top: '380px',
				          width: '650px',
				          fontSize: '24px',
				          lineHeight: '36px',
				          textIndent: '48px'
				        }
				      },
				      // 二维码
				      {
				          type: 'image',
				          url: '',
				          css: {
				            left: '302px',
				            top: '605px',
				            width: '45px',
				            height: '45px',
				          },
				      },
				    ],
				}	
			}
		},
		watch: {
			canvaData: {
			   handler(newVal, oldVal) {
				if (newVal.width) {
				  this.painting = newVal
				  this.getImg()
				}
			  },
			  deep: true,
			  // immediate: true
			}
		},
		methods: {
			async getImg(){
				const _this = this
				this.bgImg = await this.getImageInfo(this.painting.views[0].url);
				this.disImg = await this.getImageInfo(this.painting.views[3].url);
				this.ewmImg = await this.getImageInfo(this.painting.views[5].url);
				setTimeout(()=>{
				  this.initPoster();
				},1500)
			},
			initPoster () {
				// 获取背景主图，二维码信息
				const _this = this
				// 如果主图，二维码图片，设备信息都获取成功，开始绘制海报，这里需要用setTimeout延时绘制，否则可能会出现图片不显示。
				// if(this.bgImg.errMsg == 'getImageInfo:ok' && this.disImg.errMsg == 'getImageInfo:ok' && this.ewmImg.errMsg == 'getImageInfo:ok'){
					// setTimeout(()=>{
						var ctx = uni.createCanvasContext('myCanvas', this);
						// 填充背景色，白色
						ctx.setFillStyle('#fff'); // 默认白色
						ctx.fillRect(0, 0, this.canvasW, this.canvasH) // fillRect(x,y,宽度，高度)
						// 背景 图片 二维码
						if(this.bgImg.path) {
							ctx.drawImage(this.bgImg.path, 0, 0, this.canvasW, this.canvasH) 
						}
						if(this.disImg.path) {
						ctx.drawImage(this.disImg.path, 25, 182, 325, 173)
						}
						if(this.ewmImg.path) {
							ctx.drawImage(this.ewmImg.path, 302, 605, 45, 45) // drawImage(图片路径,x,y,绘制图像的宽度，绘制图像的高度,二维码的宽,高)
						}
						
						// 时间
						if(this.painting.views[2].text) {
							ctx.setFontSize(12) // 字号
							ctx.setFillStyle('#9c9c9c') // 颜色
							ctx.fillText(this.painting.views[2].text, 25, 170); // （文字，x，y）
						}
						
						// 标题，多余文字自动换行
						if(this.painting.views[1].text) {
							ctx.setFontSize(17); // setFontSize() 设置字体字号
							ctx.setFillStyle('#000'); // setFillStyle() 设置字体颜色
							this.toFormateStr(ctx, this.painting.views[1].text, 315, -1, 25, 128, 22)
						}
						
						// 内容，多余文字自动换行
						if(this.painting.views[4].text) {
							ctx.setFontSize(12); // setFontSize() 设置字体字号
							ctx.setFillStyle('#000'); // setFillStyle() 设置字体颜色
							this.toFormateStr(ctx, this.painting.views[4].text, 325, -1, 25, 380, 20)
						}
						
						ctx.draw(true,(ret)=>{ // draw方法 把以上内容画到 canvas 中。
							console.log('绘制完成')
							uni.canvasToTempFilePath({ // 保存canvas为图片
								canvasId: 'myCanvas',
								quality: 1,
								complete: function(res) {
									// 在H5平台下，tempFilePath 为 base64, // 图片提示跨域 H5保存base64失败，APP端正常输出临时路径
									// console.log(res)
								},
								success(res) {
									// console.log('success')
									_this.$emit('success', res.tempFilePath)
								}
							})
						});
						
					// },10)
				// }
				
			},
			// 获取图片信息
			getImageInfo(image) {
				const _this = this
				return new Promise((req, rej) => {
					// uni.getImageInfo({
					// 	src: image,
					// 	success: function(res) {
					// 		req(res)
					// 	},
					// });
					if (!image) {
						req({errMsg: 'getImageInfo:ok'})
						return
					}
					// debugger
					uni.downloadFile({
					    url: image,
					    success: (res) => {
							// debugger
							//statusCode状态为200表示请求成功，tempFIlePath临时路径
							if(res.statusCode==200){
								// req(res)
								uni.getImageInfo({
									src: res.tempFilePath,
									success: function(res) {
										// debugger
										req(res)
									},
								});
							}
						},
						fail: (err) => {
							rej(err)
						}
					})
				})
			},
			
			// 
			/*	
				 *  文字换行：参数解析：
				 * 	ctx:  canvas绘图上下文
				 * 	str:  需要绘制的文本内容
				 * 	draw_width:  绘制后的文字显示宽度
				 * 	lineNum:  最大行数，多出部分用'...'表示， 如果传-1可以达到自动换行效果
				 * 	startX:  绘制文字的起点 X 轴坐标
				 * 	startY:  绘制文字的起点 Y 轴坐标
				 *	steps:  文字行间距
			*/ 
			toFormateStr (ctx, str, draw_width, lineNum, startX, startY, steps ) {
				var strWidth = ctx.measureText(str).width;     // 测量文本源尺寸信息（宽度）
				var startpoint = startY, keyStr = '', sreLN = strWidth / draw_width;
				var liner = Math.ceil(sreLN);     // 计算文本源一共能生成多少行
				let strlen = parseInt(str.length / sreLN); 	// 等比缩放测量一行文本显示多少个字符
							
				// 若文本不足一行，则直接绘制，反之大于传入的最多行数（lineNum）以省略号（...）代替
				if (strWidth  < draw_width) {
				
					ctx.fillText(str, startX, startpoint);
					
				} else {
				
					for (var i = 1; i < liner + 1; i++) {
						let startPoint = strlen * (i-1);
						if (i < lineNum || lineNum == -1) {
							keyStr = str.substr(startPoint, strlen);
							ctx.fillText(keyStr, startX, startpoint);
						} else {
							keyStr = str.substr(startPoint, strlen-5) + '...';
							ctx.fillText(keyStr, startX, startpoint);
							break;
						}
						startpoint = startpoint + steps;
					}
					
				}
			},

		},
	}
</script>

